<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Throughout 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100423

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Magic Table - Examples</title>
<meta name="keywords" content="Google visualisation API, html, html 5, javascript, table, visualisation, visualization, information visualisation, information visualization, InfoVis, data visualisation, data visualization, web vis, web visualisation, web visualization, distortion, fish-eye, fish-eye lens, fisheye, fisheye lens, chart, barchart, scatterplot, graph, graphics, canvas, canvas element" />
<meta name="description" content="The Magic Table is a JavaScript library that allows you to see more in your data by applying some simple visual techniques to transform a table." />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
@import "slidertron.css";
</style>
<LINK REL="SHORTCUT ICON" HREF="http://www.grvisualisation.50webs.com/favicon.ico">
</head>

<div style="background-color:white;">
	<!-- Place this tag where you want the +1 button to render. -->
	<div class="g-plusone" data-annotation="inline" data-width="300"></div>
	
	<!-- Place this tag after the last +1 button tag. -->
	<script type="text/javascript">
	  (function() {
	    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	    po.src = 'https://apis.google.com/js/platform.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	  })();
	</script>
</div>

<body>
<!-- Google Analytics -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5253719-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- end #header-wrapper -->
<div id="logo">
	<h1>Magic Table </h1>
	<em> by Dr Greg Ross</em>
</div>
<div id="header">
	<div id="menu">
		<ul>
			<li><a href="http://www.grvisualisation.50webs.com/" class="first">Home</a></li>
			<li><a href="infovis.html">InfoVis</a></li>
			<li><a href="excelrangefinder.html">Excel RangeFinder</a></li>
			<li><a href="javascript_voronoi.html">Voronoi</a></li>
			<li><a href="javascript_surface_plot.html">3D Surface Plot</a></li>
			<li><a href="visi_scroll.html">visi-scroll</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	<div id="search">
		<form method="get" action="http://www.google.com/search">
			<fieldset>
				<input type="text" name="q" id="search-text" size="15" />
				<input style="display:none;" type="checkbox"  name="sitesearch" value="grvisualisation.50webs.com" checked />
			</fieldset>
		</form>
	</div>
	<!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->
<div id="page">
	<div id="page-bgtop">
		<div id="content">
			
			<!-- adsense container -->
			<div>
				<div class="post" style="float: left; width:40%;">
					<h2 class="title">Examples </h2>
					<div class="entry">
						<p>Click on the images below to view the live examples of the Magic Table. 
						Each example uses dummy data. You can copy the page source and modify it for you own site.</p>
					</div>
				</div>
				
				<div style="float: right;">
					<!--adsense code-->
					<script type="text/javascript"><!--
					google_ad_client = "pub-5899093360211244";
					/* 336x280, created 5/19/10 */
					google_ad_slot = "8698410079";
					google_ad_width = 336;
					google_ad_height = 280;
					//-->
					</script>
					<script type="text/javascript"
					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>
					<!--end-->
				</div>
				
				<div style="clear: both;"></div>
			</div>
			<br><br>
			<!-- end adsense container -->
			
			<div class="post">
				<h2 class="title">Click an image to view the sample </h2>
				<div class="entry">
				<a href="volsExample.html"><img src="images/volatilities_thumb.png" alt="Financial volatilities"></a>&nbsp;&nbsp;
				<a href="scatterplotExample.html"><img src="images/scatterplot_thumb.png" alt="Financial volatilities"></a>&nbsp;&nbsp;
				<a href="barchartExample.html"><img src="images/barchart_thumb.png" alt="Financial volatilities"></a>&nbsp;&nbsp;
				<a href="gradientExample.html"><img src="images/gradients_thumb.png" alt="Financial volatilities"></a>&nbsp;&nbsp;
				</div>
				
			</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
				<li>
					<h2>Real world use cases</h2>
					<div><a href="http://qiime.sourceforge.net/tutorials/tutorial.html" >rRNA sequencing</a></div>
					<br><br>
					<div><a href="http://collabornet.org/visualization/magic_table/e1.html">Student Degree Progress</a></div>
					<br><br>
					<div><a href="http://homepages.ecs.vuw.ac.nz/~craig/livej/everything.html">LiveJ - software visualisation</a></div>
				</li>
				<li>
					<h2>Features </h2>
					<ul>
						<li class="feature">fisheye table view</li>
						<li class="feature">bar-fill table cells</li>
						<li class="feature">customisable colour ramp</li>
						<li class="feature">colour and fill by global or by column values</li>
					</ul>
				</li>
				<li>
					<h2>License </h2>
					<ul>
						<li><a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License v3</a></li>
					</ul>
				</li>
				<li>
					<h2>Downloads and source</h2>
					<div><a href="http://code.google.com/p/magic-table/downloads/detail?name=magic-table-v2.0.0.3.zip" class="links">Download</a></div>
					<div><a href="http://code.google.com/p/magic-table/source/checkout" class="links">SVN checkout</a></div>
					<p>
						I spent a lot of time and effort building the Magic Table and it's totally free. It's thirsty work, so if you like it then 
						I'd appreciate it if you...
					</p>
					<div style="text-align:center;">
						<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="JZSZZTB8LXNBG">
							<input type="image" src="http://www.grvisualisation.50webs.com/images/bmab.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
							<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
						</form>
					</div>
				</li>
				<li>
					<h2>iPhone Apps </h2>
					<ul>
						<li class="feature"><a href="http://caligramsoftware.co.uk/peekaboo">Peekaboo 3D</a></li>
						<li class="feature"><a href="http://caligramsoftware.co.uk">ClapTrax</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
</div>
<div id="footer">
	<p>Copyright (c) 2008 Dr Greg Ross. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
